import React from "react";
import { Layout, Menu, Dropdown, Avatar } from "antd";
import {
  Route,
  Switch,
  Link,
  useRouteMatch,
  Routes,
  useMatch,
  useLocation,
} from "react-router-dom";
import { UserOutlined } from "@ant-design/icons";
import PetBrowsePage from "../PetView";
import AdoptionRecordsPage from "../PetAdoption";
import "./MainPage.css";

const { Header, Sider, Content } = Layout;

const MainPage = () => {
  const location = useLocation();

  const menu = (
    <Menu>
      <Menu.Item key="logout">
        <Link to="/login">退出</Link>
      </Menu.Item>
    </Menu>
  );

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Header className="main-header">
        <div className="logo">PET</div>
        <Dropdown overlay={menu}>
          <div className="user-info">
            <Avatar icon={<UserOutlined />} />
            <span>用户名</span>
          </div>
        </Dropdown>
      </Header>
      <Layout>
        <Sider width={200} className="main-sider">
          <Menu
            mode="inline"
            defaultSelectedKeys={["/main/browse"]}
            selectedKeys={[location.pathname]}
          >
            <Menu.Item key="/main/browse">
              <Link to="/main/browse">宠物浏览</Link>
            </Menu.Item>
            <Menu.Item key="/main/records">
              <Link to="/main/records">领养记录</Link>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <Content style={{ padding: "0 24px", minHeight: 280 }}>
            <Routes>
              <Route path="browse" element={<PetBrowsePage />} />
              <Route path="records" element={<AdoptionRecordsPage />} />
            </Routes>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default MainPage;
